<template>
  <el-card class="box-card websocket">
    <div class="dp-flex-sp parentBox">
      <div class="left">
        <p class="border padding">服务器配置 状态: {{ WSstatus }}</p>
        <div class="dp-flex-sp">
          <el-input v-model="url">
            <template #prepend>服务地址</template>
          </el-input>
          <el-button
            v-if="readyStatus"
            type="danger"
            plain
            @click="websocketclose"
            >关闭连接</el-button
          >
          <el-button v-else type="primary" plain @click="initWebsocket"
            >开启连接</el-button
          >
        </div>

        <p class="border padding">发包设置</p>
        <div class="dp-flex-sp">
          <el-input v-model="time" style="width:150px" :disabled="!readyStatus">
            <template #prepend>每隔</template>
          </el-input>
          <el-input v-model="content" :disabled="!readyStatus">
            <template #prepend>秒发送内容</template>
          </el-input>
          <el-button
            type="primary"
            plain
            @click="sendContent"
            :disabled="!readyStatus"
            >开始发送</el-button
          >
        </div>
        <div>
          <el-input
            style="margin-top:15px"
            type="textarea"
            :rows="3"
            placeholder="需要发送到服务端的内容"
            v-model="textarea"
            :disabled="!readyStatus"
          >
          </el-input>
          <el-button
            type="primary"
            plain
            style="margin-top:10px;width:100%"
            @click="sendtextarea"
            :disabled="!readyStatus"
            >发送到服务端</el-button
          >
        </div>
      </div>
      <div class="right">
        <p class="border">
          消息记录
          <el-button type="text" plain @click="clearInfo">清空消息</el-button>
        </p>
        <div v-for="(info, index) in infoList" :key="index">
          <p :class="info.type === 1 ? 'gcolor' : 'bcolor'">{{ info.title }}</p>
          <p>{{ info.text }}</p>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { onUnmounted, ref } from "vue";
// import { useRouter } from 'vue-router';
// import { useStore } from 'vuex';
import { getNowTime } from "@/utils/functions";
export default {
  name: "Websocket",
  setup() {
    const WSstatus = ref<string>("连接关闭");
    const url = ref<string>(
      // "ws://192.180.0.97:8099/nir-focus/websocket/splitScreen"
      "ws://localhost:8099/nir-focus/websocket/splitScreen"
    );
    const time = ref<string>("");
    const content = ref<string>("");
    const textarea = ref<string>("");
    const readyStatus = ref<boolean>(false);
    let WS: any = null;
    const infoList = ref<any[]>([]);
    // const Router = useRouter();
    // const Store = useStore();
    const pushArr = (text: any) => {
      infoList.value.push(text);
    };
    // 连接成功调用此方法
    const websocketonopen = () => {
      // WS.send(JSON.stringify(actions));
      if (WS.readyState === 1) {
        WSstatus.value = "连接成功";
        readyStatus.value = true;
      }
    };
    // 接受数据调用此方法
    const websocketonmessage = (e: any) => {
      const res = e.data;
      console.log("接收消息:", res);
      const info = {
        title: "接收消息: " + " " + getNowTime("hh:mm:ss"),
        text: res,
        type: 1
      };
      pushArr(info);
    };

    //  关闭连接调用此方法
    const websocketclose = () => {
      WSstatus.value = "连接关闭";
      readyStatus.value = false;
      WS && WS.close();
      //关闭
      WS = null;
    };
    const initWebsocket = () => {
      if (url.value) {
        if ("WebSocket" in window) {
          // 	//初始化weosocket
          const wsurl = url.value;
          if (WS) {
            return false;
          } else {
            WS = new WebSocket(wsurl);
            WS.onopen = websocketonopen;
            WS.onmessage = websocketonmessage;
            WS.onerror = () => {
              initWebsocket();
            };
            WS.onclose = websocketclose;
          }
        } else {
          // 浏览器不支持 WebSocket
          console.log("您的浏览器不支持 WebSocket!");
          return false;
        }
      }
    };

    const sendContent = () => {
      if (WS && content.value.length > 0) {
        const text = JSON.parse(content.value);
        WS.send(JSON.stringify(text));
      }
    };
    const sendtextarea = () => {
      if (WS && textarea.value.length > 0) {
        // const text = JSON.parse(textarea.value);
        // WS.send(JSON.stringify(text));
        WS.send(textarea.value);
        const info = {
          title: "发送消息: " + " " + getNowTime("hh:mm:ss"),
          text: textarea.value,
          type: 0
        };
        pushArr(info);
      }
    };
    const clearInfo = () => {
      infoList.value = [];
    };
    // getNowTime("hh:mm:ss");
    onUnmounted(() => {
      websocketclose();
    });
    // initWebsocket();
    return {
      textarea,
      url,
      infoList,
      time,
      readyStatus,
      content,
      WSstatus,
      initWebsocket,
      sendContent,
      sendtextarea,
      websocketclose,
      clearInfo
    };
  }
};
</script>

<style lang="scss" scoped>
.websocket {
  .parentBox {
    padding: 20px;
    border: 1px dashed #ccc;
    .left {
      flex: 1;
      margin-right: 20px;
    }
    .right {
      flex: 1;
      height: 800px;
    }
  }

  .border {
    border-bottom: 1px dashed #ccc;
  }
  .padding {
    padding: 11px 0;
  }
  .gcolor {
    color: green;
    font-size: 14px;
  }
  .bcolor {
    color: blue;
    font-size: 14px;
  }
}
</style>
